<template>

  <CommonContainer title="还车结算">
    <template v-slot:rightInfo>
      <span class="totalAmount">总计应收费用：{{ format_thousand(totalReceivables) }}元</span>
    </template>
    <div>
      <!--基础信息-->
      <el-row :gutter="10">
        <el-col :span="24">
          <el-descriptions>
            <el-descriptions-item label="还车类别">
              <dict-tag :options="dict.type.return_car_type" :value="detailInfo.returnCategory"/>
            </el-descriptions-item>
            <el-descriptions-item :label="`${detailInfo.returnCategory==3?'过户时间':'还车时间'}`">{{ detailInfo.returnTime|filterNull }}</el-descriptions-item>
            <el-descriptions-item label="还车里程数(km)">{{ detailInfo.returnMileage|filterNull }}</el-descriptions-item>
            <el-descriptions-item label="还车油量(%)">{{ detailInfo.returnFuel|filterNull }}</el-descriptions-item>
            <el-descriptions-item label="已履行租期">{{ detailInfo.fulfilledLeaseTerm }}</el-descriptions-item>
            <el-descriptions-item label="行驶里程(km)">{{ detailInfo.drivingMileage|filterNull }}</el-descriptions-item>
            <el-descriptions-item label="油量差值(%)">{{ oilVolumeDiff|filterNull }}</el-descriptions-item>
            <el-descriptions-item v-if="detailInfo.returnCategory == 1||detailInfo.returnCategory ==5" label="违约原因">
              <dict-tag :options="dict.type.reason_for_early_return" :value="parseInt(detailInfo.defaultReason)"/>
            </el-descriptions-item>

            <template v-if="detailInfo.returnCategory != 3">
              <el-descriptions-item label="还车原因" :span="3">{{ detailInfo.reasonForReturningTheCar|filterNull }}</el-descriptions-item>
              <template v-if="detailInfo.returnCategory < 3 || detailInfo.returnCategory ==5">
                <el-descriptions-item label="验车方式" :span="3">
                  <dict-tag :options="dict.type.vehicle_inspection_method" :value="detailInfo.vehicleInspectionMethod"/>
                </el-descriptions-item>
                <el-descriptions-item label="还车附件" :span="3">
                  <image-common disabled v-model="detailInfo.returnAccessories" :up-type="2"></image-common>
                </el-descriptions-item>

                <template v-if="detailInfo.vehicleInspectionMethod==2">
                  <el-descriptions-item label="联系人">{{ detailInfo.thirdPartyContact|filterNull }}</el-descriptions-item>
                  <el-descriptions-item label="联系人电话">{{ detailInfo.thirdPartyContactPhone|filterNull }}</el-descriptions-item>
                  <el-descriptions-item label="检测城市">{{ detailInfo.thirdPartyCityName|filterNull }}</el-descriptions-item>
                  <el-descriptions-item label="车辆存放地址">{{ detailInfo.thirdPartyAdress|filterNull }}</el-descriptions-item>
                </template>
              </template>
            </template>
            <el-descriptions-item label="还车单" :span="3">
              <image-common disabled v-model="detailInfo.returnSlip" :up-type="2"></image-common>
            </el-descriptions-item>

          </el-descriptions>
        </el-col>
      </el-row>
      <!--还车车况|车辆检测信息-->
      <template v-if="detailInfo.returnCategory < 3||detailInfo.returnCategory ==5">
        <el-row :gutter="10" v-if="detailInfo.vehicleInspectionMethod == 1">
          <el-col :span="24">
            <p class="subtitle">还车车况</p>
          </el-col>
          <el-col :span="24">
            <el-descriptions>
              <el-descriptions-item label="车前">
                <image-common disabled v-model="detailInfo.carFront" :up-type="2"></image-common>
              </el-descriptions-item>
              <el-descriptions-item label="车后">
                <image-common disabled v-model="detailInfo.carRear" :up-type="2"></image-common>
              </el-descriptions-item>
              <el-descriptions-item label="车左">
                <image-common disabled v-model="detailInfo.carLeft" :up-type="2"></image-common>
              </el-descriptions-item>
              <el-descriptions-item label="车右">
                <image-common disabled v-model="detailInfo.carRight" :up-type="2"></image-common>
              </el-descriptions-item>
              <el-descriptions-item label="仪表盘">
                <image-common disabled v-model="detailInfo.dashboard" :up-type="2"></image-common>
              </el-descriptions-item>
              <el-descriptions-item label="其他">
                <image-common disabled v-model="detailInfo.other" :up-type="2"></image-common>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="24" v-if="detailInfo.orderReturnDamage && detailInfo.orderReturnDamage.length>0">
            <el-table
                :data="detailInfo.orderReturnDamage"
                :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
              <el-table-column
                  align="center"
                  prop="damageType"
                  label="车损项"
                  min-width="180">
                <template v-slot="{row}">
                  <dict-tag :options="dict.type.return_car_damage_type" :value="row.vehicleDamageItem"/>
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleDamageDetail"
                  label="车损详情"
                  min-width="180">
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleDamageFee"
                  label="预估车损费"
                  min-width="180">
                <template v-slot="{row}">
                  {{ format_thousand(row.vehicleDamageFee) }}
                </template>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="vehicleDamageRemark"
                  label="备注"
                  min-width="180">
              </el-table-column>

            </el-table>
          </el-col>

        </el-row>
        <el-row :gutter="10" v-else-if="detailInfo.vehicleInspectionMethod == 2">
          <el-col :span="24">
            <div class="flex-row-center-sb">
              <p class="subtitle">车辆检测信息</p>
              <p style="color: #1890ff;font-size: 13px;" @click="handleThirdPartyTesting">验车项明细</p>
            </div>
          </el-col>
          <el-col :span="24">
            <el-descriptions>
              <el-descriptions-item label="车损费">
                {{ format_thousand(detailInfo.vehicleDamageFee)|filterNull }}
              </el-descriptions-item>
              <el-descriptions-item :span="2" label="车损说明">
                {{ format_thousand(detailInfo.vehicleDamageDescription)|filterNull }}
              </el-descriptions-item>
              <el-descriptions-item label="验车单">
                <image-common disabled v-model="detailInfo.acceptanceForm" :up-type="2"></image-common>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </template>
      <!--理赔方式-->
      <template v-if="detailInfo.returnCategory == 4">
        <el-row :gutter="10">
          <el-col :span="24">
            <div class="flex-row-center">
              <p class="subtitle">理赔方式</p>
            </div>
          </el-col>
          <el-col :span="24">
            <el-descriptions>
              <el-descriptions-item label="理赔承担方式">
                {{ detailInfo.claimsMethod == 1 ? '客户理赔' : '保险理赔' }}
              </el-descriptions-item>
              <el-descriptions-item :label="`${detailInfo.claimsMethod==1?'客户理赔款':'保险理赔款'}`">
                {{ detailInfo.compensationClaims|filterNull }}
              </el-descriptions-item>
              <el-descriptions-item label="其他费用">
                {{ format_thousand(detailInfo.otherFee)|filterNull }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </template>
      <!--违章信息-->
      <el-row :gutter="10">
        <el-col :span="24">
          <p class="subtitle">违章信息</p>
        </el-col>
        <el-col :span="24">
          <el-descriptions>
            <el-descriptions-item label="违章分数">
              {{ detailInfo.violationScore|filterNull }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="违章费用">
              {{ format_thousand(detailInfo.violationFee)|filterNull }}
            </el-descriptions-item>
            <el-descriptions-item label="违章附件">
              <image-common disabled v-model="detailInfo.violationAttachment" :up-type="2"></image-common>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <!--扣款费用-->
      <el-row :gutter="10">
        <el-col :span="24">
          <p class="subtitle">扣款费用</p>
        </el-col>
        <el-col :span="24">
          <el-descriptions>
            <el-descriptions-item label="车辆租金欠款金额">{{ format_thousand(rentArrears)|filterNull }}</el-descriptions-item>
            <el-descriptions-item label="剩余租期">{{ detailInfo.remainingLeaseTerm|filterNull }}</el-descriptions-item>
            <template >
              <el-descriptions-item v-if="detailInfo.returnCategory!=2" label="违约金">{{ format_thousand(detailInfo.defaultDeduction)|filterNull }}</el-descriptions-item>
              <el-descriptions-item v-if="detailInfo.returnCategory==1||detailInfo.returnCategory ==5" label="违约金减免">{{ format_thousand(detailInfo.defaultReduction)|filterNull }}</el-descriptions-item>
            </template>
            <el-descriptions-item v-if="detailInfo.returnCategory==3||detailInfo.returnCategory ==4" label="尾款">{{ format_thousand(balancePayment)|filterNull }}</el-descriptions-item>
            <el-descriptions-item label="加速折旧费">{{ format_thousand(detailInfo.depreciation)|filterNull }}</el-descriptions-item>
            <el-descriptions-item label="超里程数(km)">{{ detailInfo.overMileage|filterNull }}</el-descriptions-item>
            <el-descriptions-item label="超里程费">{{ format_thousand(detailInfo.overMileageFee)|filterNull }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <!--自定义扣款项-->
      <el-row :gutter="10" v-if="detailInfo.orderReturnDeduction && detailInfo.orderReturnDeduction.length>0">
        <el-col :span="24">
          <p class="subtitle">自定义扣款项</p>
        </el-col>
        <el-table
            :data="detailInfo.orderReturnDeduction"
            :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
          <el-table-column
              align="center"
              prop="deductionName"
              label="扣款项名称"
              min-width="180">
          </el-table-column>
          <el-table-column
              align="center"
              prop="deductionAmount"
              label="扣款金额"
              min-width="180">
            <template v-slot="{row}">
              {{ format_thousand(row.deductionAmount) }}
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              prop="deductionReason"
              label="扣款原因"
              min-width="180">
          </el-table-column>

        </el-table>
      </el-row>
    </div>
  </CommonContainer>


</template>

<script>
import dayjs from 'dayjs'
import {queryReport, getObtainRentArrears} from "@/api/returnCar/returnCar";

export default {
  dicts: ['return_car_type', 'vehicle_inspection_method', 'return_car_damage_type', 'return_car_breach', 'reason_for_early_return'],
  props: {
    detailInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }

  },
  data() {
    return {
      rentArrears: 0,
      balancePayment: 0
    }
  },
  computed: {
    // fulfilledLeaseTerm(){
    //   let outboundDate = this.detailInfo?.outboundVehicleCondition.outboundDate;
    //   const date1 = new Date(outboundDate);
    //   const date2 = new Date(this.detailInfo.returnTime);
    //   if(!date1||!this.detailInfo.returnTime){
    //     return "--"
    //   }
    //   let months = (date2.getFullYear() - date1.getFullYear()) * 12;
    //   months -= date1.getMonth();
    //   months += date2.getMonth();
    //   const dateDiff = date2.getDate() - date1.getDate();
    //   if (dateDiff < 0) {
    //     months--;
    //   }
    //   if(months<0||(months===0&&dateDiff<0)){
    //     return "0日"
    //   }else{
    //     if(months===0){
    //       return `${dateDiff > 0 ? dateDiff : 1}日`;
    //     }else{
    //       return `${months}月${dateDiff > 0 ? dateDiff : 0}日`;
    //     }
    //   }
    // },
    oilVolumeDiff() {
      //油量差值=还车油量-出库油量
      let oilVolumeDiff = Number(this.detailInfo.returnFuel) - Number(this.detailInfo.outboundFuel)
      return oilVolumeDiff
    },
    //理赔总计=理赔费+其他费
    claimsTotal() {
      let total = 0
      const detailInfo = this.detailInfo;
      if (detailInfo.returnCategory == 4) {
        total = Number(detailInfo?.compensationClaims || 0) + Number(detailInfo?.otherFee || 0)
      }
      return total
    },
    // 总计应收=其他费用累计(租金及理赔费用不参与计算)
    totalReceivables() {
      let total = 0
      const detailInfo = this.detailInfo;
      if(detailInfo.orderNumber){
        this.getObtainRentArrears();
      }

      //提前还车|到期还车|合同变更还车->自主验车->车损费
      if ((detailInfo?.returnCategory < 3 || detailInfo?.returnCategory ==5) && detailInfo?.vehicleInspectionMethod == 1) {
        if (detailInfo.orderReturnDamage && detailInfo.orderReturnDamage.length > 0) {
          detailInfo.orderReturnDamage.forEach(item => {
            total += Number(item.vehicleDamageFee || 0)
          })
        }
      }
      //提前还车|到期还车|合同变更还车->第三方检测->车损费
      if ((detailInfo?.returnCategory < 3||detailInfo?.returnCategory ==5) && detailInfo?.vehicleInspectionMethod == 2) {
        total += Number(detailInfo?.vehicleDamageFee || 0)
      }
      //违章费用
      total += Number(detailInfo?.violationFee || 0)
      //扣款费用项=违约费+加速折旧费+超里程费
      total += Number(detailInfo?.depreciation || 0) + Number(detailInfo?.overMileageFee || 0)
      // //如果是租购还车|事故还车+尾款
      // if (detailInfo?.returnCategory > 2) {
      //   total += Number(detailInfo.balancePayment || 0)
      // }
      //客户理赔款
      if(detailInfo?.returnCategory == 3 && detailInfo.claimsMethod == 1){
        total += Number(detailInfo?.compensationClaims || 0) + Number(detailInfo?.otherFee || 0)
      }
      //自定义扣款项
      if (detailInfo?.orderReturnDeduction && detailInfo?.orderReturnDeduction?.length > 0) {
        detailInfo.orderReturnDeduction.forEach(item => {
          total += Number(item.deductionAmount || 0)
        })
      }
      //违约金
      if (detailInfo?.returnCategory !=2) {
        total += Number(detailInfo?.defaultDeduction || 0)
    
      }
      //违约金减免
      if(detailInfo?.returnCategory == 1|| detailInfo?.returnCategory==5){
        total -= Number(detailInfo?.defaultReduction || 0)
      }

      return total
    }
  },
  methods: {
    //第三方检测明细
    handleThirdPartyTesting() {
      queryReport(this.detailInfo.thirdPartyUrl).then(res => {
        let url = res.data
        if (url) {
          window.open(url, '_blank')
        } else {
          this.$message.error("暂无第三方检测报告");
        }
      })

    },
    getObtainRentArrears() {
      console.log('orderNumber',this.detailInfo.orderNumber);
      getObtainRentArrears(this.detailInfo.orderNumber).then(res => {
        this.rentArrears = res.data.rentArrears || 0;
        this.balancePayment = res.data.balancePayment || 0;
      })
    }
  },
  mounted() {


  },

}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.subtitle {
  font-size: 14px;
  font-weight: bold;
  color: #333333;

  &::before {
    display: inline-block;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: $primary;
    margin-right: 5px;
    position: relative;
    top: -1px;
  }
}

::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}

.totalAmount {
  font-size: 14px;
  font-weight: bold;
  color: red;
}
</style>
